<template>
  <div style="background-colro: #f9f9f9 ">
    <div class="bg-container">
      <div class="bg-img">
        <!-- <el-image :src="bgImg" fit="cover"> </el-image> -->
        <el-carousel indicator-position="inside" height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <a :href="item.redirectUrl ? item.redirectUrl : ''">
              <el-image :src="item.picture" fit="cover"> </el-image>
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="self-container ">
      <!-- <div class="select-container">
        <RouterSelectStrip
          :active-id.sync="queryParams.activeSort"
          :screenList="activeSortList"
          label="活动排序"
          @itemClick="activeSortClick"
        />
        <DashLine />
        <RouterSelectStrip
          :active-id.sync="queryParams.activeType"
          :screenList="activeTypeList"
          label="活动类型"
          @itemClick="activeTypeClick"
        />
        <DashLine />

        <RouterSelectStrip
          :active-id.sync="queryParams.activeStatus"
          :screenList="activeStatusList"
          label="活动状态"
          @itemClick="activeStatusClick"
        />
      </div> -->

      <!-- <div class="search-container">
        <div class="search-box">
          <el-input placeholder="请输入内容" v-model="queryParams.searchInput">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <span class="search-btn" slot="append" @click.stop="getList"
              >搜索</span
            >
          </el-input>
        </div>
      </div> -->

      <ul class="info-container">
        <li
          v-for="item in infoList"
          :key="item.id"
          class="info-item"
          @click="toDetail(item.id)"
        >
          <div>
            <div
              class="head-bg"
              :style="{
                background: `url(${item.picture})`,
                backgroundSize: 'cover',
                backgroundRepeat: 'no-repeat',
              }"
            >
              <div
                class="float-tag"
                :style="{
                  background: activityStatusObj(item.activityStatus)['bgColor'],
                }"
              >
                {{ activityStatusObj(item.activityStatus)['dictLabel'] }}
              </div>
            </div>
            <div class="info-title">
              {{ item.name }}
            </div>
          </div>

          <div>
            <div class="sub-info-title">
              <i class="el-icon-time"> </i>
              <span class="pl-4 text-sm">
                {{ parseTime(item.startTime, '{y}-{m}-{d}') }} -
                {{ parseTime(item.endTime, '{y}-{m}-{d}') }}
              </span>
            </div>

            <div class="sub-info-title">
              <i class="el-icon-location-outline"> </i>
              <span class="pl-4">
                {{ item.address }}
              </span>
            </div>
          </div>
        </li>
      </ul>

      <pagination
        :total="tableTotal"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        :pageSizes="pageSizes"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip.vue'

import { getActiveList } from '@/api/innovateActive'
export default {
  name: 'innovateActivity',
  components: {
    RouterSelectStrip,
  },
  data() {
    return {
      bannerList: [{ picture: require('@/assets/page-head/policy.png') }],
      activeSortList: [],
      activeTypeList: [],
      activeStatusList: [],

      pageSizes: [10, 16, 20, 30],
      queryParams: {
        page: 1,
        limit: 16,
      },
      // 报名中（活动结束时间未超过实时时间；可购买票数大于0）、
      // 进行中（活动结束时间未超过实时时间；可购买票数为0）、
      // 已结束（活动结束时间已超过实时时间；可购买票数为0）
      statusTypeList: [
        {
          dictLabel: '报名中',
          bgColor: '#1985F0',
          minTicketNum: 1,
          isOverTime: 0,
        },
        {
          dictLabel: '进行中',
          bgColor: '#F08519',
          minTicketNum: 0,
          isOverTime: 0,
        },
        {
          dictLabel: '已结束',
          bgColor: '#9D9D9D',
          minTicketNum: 0,
          isOverTime: 1,
        },
      ],
      tableTotal: 0,
      infoList: [
        {
          id: 124,
          name: '预见独角兽学院吴世春导师班第二季',
          synopsis: null,
          picture:
            'http://file.thinkervc.cn/7khiwad4lgxd4ioat6j3lsrs2fvpuvjyyollcb312ziy6bnhyh0x271gkd2b1isrvy7w33v48rb5u53b.jpg',
          address: '北京、南昌、赣州丫山',
          browse: 342,
          startTime: '2021-12-01 09:00:00',
          endTime: '2021-12-30 00:00:00',
          publishTime: '2021-03-30 18:44:28',
          price: 10000000,
          activityStatus: '1',
          ticketNum: 12,
        },
      ],
    }
  },
  computed: {
    activityStatusObj() {
      return function(value) {
        switch (Number(value)) {
          case 0:
            return this.statusTypeList[0]
          case 1:
            return this.statusTypeList[1]
          case 2:
            return this.statusTypeList[2]
          default:
            return {
              dictLabel: '未知',
              bgColor: '#9D9D9D',
              minTicketNum: 0,
              isOverTime: 1,
            }
        }
      }
    },
    statusObj() {
      return (activeItem) => {
        let activeTime = new Date(activeItem.endTime).valueOf()
        let nowTime = new Date().valueOf()
        let isOverTime = nowTime - activeTime > 0 ? 1 : 0
        let ticketNum = activeItem.ticketNum
        let findItem = this.statusTypeList.find((item) => {
          return (
            item.isOverTime === isOverTime && ticketNum >= item.minTicketNum
          )
        })
        return findItem || this.statusTypeList[this.statusTypeList.length - 1]
      }
    },
  },
  created() {
    this.getList()
  },
  methods: {
    activeSortClick() {},
    activeTypeClick() {},
    activeStatusClick() {},
    // 获取数据
    getList() {
      getActiveList(this.queryParams).then((res) => {
        console.log('活动 列表')
        console.log(res)
        if (res.code === 200) {
          this.tableTotal = res.data.totalNumber
          this.infoList = res.data.data
        }
      })
    },
    toDetail(id) {
      this.$router.push({ path: '/innovateActivity/innovateActivDetail/' + id })
    },
  },
}
</script>

<style lang="scss" scoped>
.bg-container {
  width: 100%;
  height: 500px;
  position: relative;
  .bg-img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 500px;

    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}

.select-container {
  margin-top: 25px;
  background-color: #f6f9ff;
}
.search-container {
  display: flex;
  align-items: center;
  padding: 1rem;
  margin-top: 25px;
  background-color: #f6f9ff;

  .search-box {
    display: flex;
    width: 560px;
    ::v-deep .el-input-group__append {
      background-color: #409eff;
      cursor: pointer;
    }
    .search-btn {
      background-color: #409eff;
      color: #fff;
    }
  }
}

.info-container {
  @apply grid grid-cols-4 gap-4 mt-8 py-4;

  .info-item {
    width: 289px;
    min-height: 313px;

    @apply flex flex-col justify-start  cursor-pointer rounded-md bg-white transition-all duration-150;
    &:hover {
      box-shadow: 0px 5px 10px 0px rgba(22, 120, 255, 0.2);
    }
    .info-title {
      font-size: 14px;
      height: 3rem;
      line-height: 1.5rem;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      @apply font-bold m-4;
    }
    .head-bg {
      width: 289px;
      height: 182px;
      overflow: hidden;

      .float-tag {
        position: absolute;
        left: 4px;
        top: 4px;
        width: 74px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        color: #fff;
        border-radius: 14px 0px 14px 0px;
      }
    }
    .sub-info-title {
      @apply leading-7 text-gray-400 text-sm px-4;
    }
  }

  .line-2 {
  }
}
</style>
